<template>
    <div class="smart-index">
        <div class="smart-header">
            <img src="@/assets/smart/smart-header-1.jpg" />
            <img src="@/assets/smart/smart-header-2.jpg" />
        </div>
        <div class="smart-form">
            <img src="@/assets/smart/smart-book2.jpg" alt="" class="smart-form-bg" />

            <Form ref="form" :model="form" :rules="rules" :label-width="60" class="form-container">
                <FormItem label="姓名" prop="name" class="form-item">
                    <Input v-model="form.name" placeholder="请输入姓名"></Input>
                </FormItem>
                <FormItem label="手机号" prop="phone" class="form-item">
                    <Input v-model="form.phone" placeholder="请输入手机号"></Input>
                </FormItem>
                
                <FormItem label="地区" prop="area" class="form-item">
                    <!-- 级联 -->
                    <Cascader :data="areaData" v-model="form.area" placeholder="请选择地区" :props="{ label: 'name', value: 'id' }"></Cascader>
                </FormItem>

                <FormItem  label=" " class="form-item">
                    <Button @click="submitForm('form')" long class="form-submit">提交</Button>
                </FormItem>
            </Form>

        </div>
        <div class="smart-swiper">
            <img src="@/assets/smart/smart-lunbo2.jpg" alt="" class="smart-swiper-bg" />

            <swiper :options="swiperOptions" class="swiper-container swiper-container-1">
                <swiper-slide v-for="(item, index) in 4" :key="index">
                    <img :src="require(`@/assets/smart/smart2404_1-${index + 1}.png`)" alt="Slide" />
                </swiper-slide>
            </swiper>

            <swiper :options="swiperOptions" class="swiper-container swiper-container-2">
                <swiper-slide v-for="(item, index) in 4" :key="index">
                    <img :src="require(`@/assets/smart/smart2404_3-${index + 1}.png`)" alt="Slide" />
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>

import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'
import { queryAreaData, saveEnroll } from '@/api/smartApi.js'

export default {
    components: {
        swiper,
        swiperSlide,
    },
    data() {
        return {
            swiperOptions: {
                loop: true,
                autoplay: {
                    delay: 3000,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            },

            form: {
                name: '',
                phone: '',
            },

            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^[1][3-9][0-9]{9}$/, message: '手机号格式不正确', trigger: 'blur' },
                ],
            },

            areaData: [],
        };
    },

    methods: {
        loadAllAreaData() {
            queryAreaData()
                .then((response) => {
                    console.log('获取区域数据成功:', response.data);
                    if (response.data.code == 0) {
                        this.areaData = this.transformAreaData(response.data.data);
                    } else {
                        this.$message.error('获取区域数据失败');
                    }
                })
                .catch((error) => {
                    console.error('获取区域数据失败:', error)
                })
        },
        transformAreaData(data) {
            return data.map(item => {
                const transformedItem = {
                    value: item.id,
                    label: item.name,
                    ...item,
                };
                if (item.children && item.children.length > 0) {
                    transformedItem.children = this.transformAreaData(item.children);
                }
                return transformedItem;
            });
        },

        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    console.log('提交表单:', this.form);
                    this.form.cityId = this.form.area[this.form.area.length - 1];
                    
                    saveEnroll(this.form)
                        .then((response) => {
                            console.log('提交成功:', response.data);
                            if (response.data.code == 0) {
                                this.$Message.success('提交成功');
                            } else {
                                this.$Message.error('提交失败');
                            }
                        })
                        .catch((error) => {
                            console.error('提交失败:', error);
                            this.$Message.error('提交失败');
                        });
                } else {
                    console.log('表单验证失败');
                }
            });
        }
    },

    created() {
        this.loadAllAreaData()
    },
}
</script>

<style lang="less" scoped>
.smart-header {
    display: flex;
    flex-direction: column;
}

.smart-form {
    position: relative;
    height: 225px;

    .smart-form-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .form-container {

        padding: 20px 20px 0;

        .form-item {

            .form-submit {
                background-color: #222;
                border: 1rpx solid #222;
                border-color: #222;
                color: #fff;
            }
        }
    }
}

.smart-swiper {
    position: relative;
    height: 574px;

    .smart-swiper-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .swiper-container {
        width: 328px;
        height: 192px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
    }

    .swiper-container-1 {
        top: 80px;
    }

    .swiper-container-2 {
        top: 350px;
    }
}
</style>
